<div class="container">

  <page-header title="Dashboards"></page-header>

  <div class="row">
    <div class="col-md-3 list-control-t">
      <div class="m-b-10">
        <input type="text" class="form-control" placeholder="Search Dashboards..." ng-change="$ctrl.update()" ng-model="$ctrl.searchTerm" ng-model-options="{ allowInvalid: true, debounce: 200 }"
          autofocus/>
      </div>

      <div class="list-group m-b-10 tags-list tiled">
        <a href="dashboards" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'all'}">
          All Dashboards
        </a>

        <a href="dashboards/favorites" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'favorites'}">
          <span class="btn-favourite">
            <i class="fa fa-star" aria-hidden="true"></i>
          </span>
          Favorites
        </a>
      </div>

      <div class="m-b-10">
        <tags-list tags-url="api/dashboards/tags" on-tags-update="$ctrl.onTagsUpdate"></tags-list>
      </div>

      <div class="m-b-10">
        <select ng-change="$ctrl.update()" ng-model="$ctrl.pageSize" class="form-control"
          ng-options="value as $ctrl.pageSizeLabel(value) for value in $ctrl.pageSizeOptions"></select>
      </div>

    </div>

    <div ng-if="!$ctrl.loaded" class="col-md-9 list-content text-center">
      <big-message icon="'fa-spinner fa-2x fa-pulse'" message="'Loading...'"></big-message>
    </div>

    <div ng-if="$ctrl.loaded && $ctrl.showEmptyState" class="col-md-9 list-content">
      <div ng-if="($ctrl.currentPage == 'all') && ($ctrl.searchText.length == 0 || $ctrl.searchText === undefined)">
        <empty-state icon="zmdi zmdi-view-quilt" description="See the big picture" show-dashboard-step="true" illustration="dashboard"
          help-link="https://help.redash.io/category/22-dashboards"></empty-state>
      </div>

      <big-message ng-if="($ctrl.currentPage == 'favorites') && ($ctrl.searchTerm === undefined || $ctrl.searchTerm.length == 0) && $ctrl.selectedTags.size === 0"
        message="'Mark dashboards as Favorite to list them here.'" icon="'fa-star'" />

      <big-message message="'Sorry, we couldn\'t find anything.'" icon="'fa-search'" ng-if="$ctrl.searchTerm.length > 0"></big-message>

      <no-tagged-objects-found object-type="'dashboards'" tags="$ctrl.selectedTags" ng-if="$ctrl.selectedTags.size > 0" />
    </div>

    <div ng-if="$ctrl.loaded && !$ctrl.showEmptyState" class="col-md-9 list-content">
      <div class="bg-white tiled">
        <table class="table table-condensed table-hover table-data">
          <thead>
            <tr>
              <th style="width: 33px"></th>
              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('name')">
                Name
                <sort-icon column="'name'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
              </th>
              <th></th>
              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('created_at')">
                Created At
                <sort-icon column="'created_at'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="dashboard in $ctrl.paginator.getPageRows()" ng-click="$ctrl.navigateTo($event, 'dashboard/' + dashboard.slug)">
              <td class="p-r-0">
                <favorites-control item="dashboard"></favorites-control>
              </td>
              <td class="table-main-title">
                <a href="dashboard/{{ dashboard.slug }}">
                  {{ dashboard.name }}
                </a>
                <dashboard-tags-control class="d-block" tags="dashboard.tags" is-draft="dashboard.is_draft" is-archived="dashboard.is_archived"></dashboard-tags-control>
              </td>
              <td class="p-r-0">
                <img ng-src="{{ dashboard.user.profile_image_url }}" class="profile__image_thumb" title="Created by {{ dashboard.user.name }}"
                />
              </td>
              <td>{{ dashboard.created_at | dateTime }}</td>
            </tr>
          </tbody>
        </table>
        <paginator paginator="$ctrl.paginator"></paginator>
      </div>
    </div>

    <div class="col-md-3 list-control-r-b">
      <div class="m-b-10">
        <input type="text" class="form-control" placeholder="Search Dashboards..." ng-change="$ctrl.update()" ng-model="$ctrl.searchTerm" ng-model-options="{ allowInvalid: true, debounce: 200 }"
          autofocus />
      </div>

      <div class="list-group m-b-10 tags-list tiled">
        <a href="dashboards" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'all'}">
          All Dashboards
        </a>

        <a href="dashboards/favorites" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'favorites'}">
          <span class="btn-favourite">
            <i class="fa fa-star" aria-hidden="true"></i>
          </span>
          Favorites
        </a>
      </div>

      <div class="m-b-10">
          <tags-list tags-url="api/dashboards/tags" on-tags-update="$ctrl.onTagsUpdate"></tags-list>
      </div>
      <div class="m-b-5">
        <select ng-change="$ctrl.update()" ng-model="$ctrl.pageSize" class="form-control"
          ng-options="value as $ctrl.pageSizeLabel(value) for value in $ctrl.pageSizeOptions"></select>
      </div>
    </div>
  </div>
</div>
